<template>
	<view class="details-page">
		<!-- 导航 -->
		<block v-if="isFixed">
			<CustomNavbar :iconFlag="iconFlag" :navTitle="navTitle" :isFixed="isFixed" />
		</block>
		
		<!-- 内容 -->
		<view class="details-content-box">
			<view class="news-title">{{ newsDetailsData.title }}</view>
			
			<view class="content-box">
				<up-read-more showHeight="400" :toggle="true" style="padding: 24rpx;">
				    <rich-text :nodes="newsDetailsData.content"></rich-text>
				</up-read-more>
			</view>
			
			<!-- 底部-->
			<view class="foot-box">
				<view class="item-box">
					<u-icon size="28px" color="#000" name="chat" @click="handleComment" />
					<text>{{ newsDetailsData.totalComments }}</text>
				</view>
				<view class="item-box" style="margin-left: 200rpx;">
					<u-icon size="28px" color="#000" name="share-square" />
					<text>{{ newsDetailsData.totalForwards }}</text>
				</view>
			</view>
			
		</view>
		<!-- 评论弹窗 -->
		<PopupVue :popupShow="popupShow" @closeCB="popupShow = false" />
	</view>
</template>

<script setup lang="ts">
	import CustomNavbar from '../../components/customNavbar.vue';
	import PopupVue from '../popupComponents/index.vue';
	import { ref, reactive } from 'vue';

	// 引入组件
	components: {
		CustomNavbar;
		PopupVue
	};

	const props : any = defineProps({
		title: String,
		id: String || Number
	});
	
	// 自定义导航是否通栏显示
	const isFixed = ref(true)
	// 导航标题
	const navTitle = ref(props.title || '新闻')
	// 返回图标是否展示
	const iconFlag = ref(true)
	
	// 弹窗状态
	const popupShow = ref(false)
	
	// 数据
	const newsDetailsData = ref({
		totalComments: 75, // 总评论数
		totalForwards: 4, // 总转发数
		title: '习近平抵达杜尚别习近平抵达杜尚别习近平抵达杜尚别习',
		content: '秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。 我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。',
	})
	
	// 点击评论
	const handleComment = () => {
		popupShow.value = true
	}
	
</script>

<style lang="scss" scoped>
	.details-page {
		width: 100%;
		height: 100%;
		overflow: hidden;
		
		.details-content-box {
			width: 100%;
			height: calc(100vh - 120rpx);
			margin-top: 120rpx;
			background-color: #fff;
			overflow: hidden;
			
			.news-title {
				padding: 24rpx;
				box-sizing: border-box;
				height: 120rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				font-weight: 700;
				font-size: 32rpx;
				color: #000;
				text-align: center;
			}
			
			.content-box {
				width: 100%;
				height: calc(100% - 120rpx - 88rpx);
				overflow: auto;
			}
			
			.foot-box {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 -5px 5px -2px rgba(0, 0, 0, 0.4);
				
				.item-box {
					display: flex;
					align-items: center;
				
					text {
						font-size: 32rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
	}
</style>